<template>
	<view class="m-time-line">
		<view class="m-time-line-item" v-for="(item, index) in tableData"
			:key="KeyName ? item[KeyName as keyof typeof item] : index">
			<view class="m-time-line-item-tail" v-if="index !== tableData.length - 1"
				:style="{ borderLeft: `1px solid ${roundLineColor}` }"></view>
			<view class="m-time-line-item-head" :style="{ color: roundColor, borderColor: roundColor }"></view>
			<view class="m-time-line-item-content">
				<slot name="content" :row="item"></slot>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { withDefaults } from 'vue'

	// 定义列表项数据类型（泛型）
	type TableItem = Record<string, any>

	// 定义组件属性并设置默认值
	const props = withDefaults(defineProps<{
		// 时间线数据列表
		tableData : TableItem[]
		// 列表项唯一标识字段名
		KeyName ?: string
		// 左侧圆环颜色
		roundColor ?: string
		// 左侧连接线颜色
		roundLineColor ?: string
	}>(), {
		tableData: () => [],
		KeyName: '',
		roundColor: '#02b980',
		roundLineColor: '#f0f0f0'
	})
</script>

<style lang="scss">
	/* #ifdef MP-WEIXIN */
	view {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}

	/* #endif */

	/* #ifndef MP-WEIXIN */
	* {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}

	/* #endif */

	.m-time-line {
		box-sizing: border-box;
		color: rgba(0, 0, 0, .85);
		font-size: 12px;
		font-variant: tabular-nums;
		line-height: 1.5715;
		font-feature-settings: "tnum", "tnum";
		margin: 0;
		padding: 0;
		list-style: none;
		margin-top: 10px;
		padding: 17px 15px;
		width: 100%;
	}

	.m-time-line-item {
		position: relative;
		margin: 0;
		padding-bottom: 10px;
		font-size: 12px;
		list-style: none;
	}

	.m-time-line-item-tail {
		position: absolute;
		top: 10px;
		left: 4px;
		height: calc(100% - 10px);
	}

	.m-time-line-item-head {
		position: absolute;
		width: 10px;
		height: 10px;
		background-color: #fff;
		border: 2px solid transparent;
		border-radius: 100px;
	}

	.m-time-line-item-head-blue {
		color: #02b980;
		border-color: #02b980;
	}

	.m-time-line-item-content {
		position: relative;
		top: -20.858px;
		margin: 0 0 0 10px;
		word-break: break-word;
		padding-bottom: 10px;
		border-bottom: 1px solid #f7f7f7;
	}
</style>